#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* or any color/image */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* on top of everything */
  transition: opacity 0.5s ease;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-text {
  font-family: "decoy", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  color: #000000;
}

.image-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 5;
}
  
.link-image {
    position: absolute;
    width: 25vw;           /* Responsive width */
    max-width: 25vw;      /* Prevent oversized buttons */
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: none; 
    cursor: none !important;
}

@media screen and (min-width: 480px) {  /* Desktop View */
    .back-btn {
      bottom: 5vh;
      right: 5vw;
    }

    body {
        background-image: url('origin bg 1 desktop.webp');
        background-size: cover;        
        background-position: center;    
        background-repeat: no-repeat;   
      }
}

@media screen and (max-width: 479px) {
    body {
      background-image: url('origin 1 bg mobile.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  
    .image-container {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .link-image {
      position: static;
      width: 60vw;
      max-width: 300px;
    }
  
    .back-btn {
      position: absolute;         /* Ensure it's positioned relative to the nearest positioned ancestor */
      bottom: 5vh;                /* Distance from bottom */
      left: 50%;                  
      transform: translateX(-50%); 
    }
}

/* Canvas container (scratch card) is behind images */
#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; /* Canvas below the images */
    pointer-events: none;
}
  
  /* Optional: Apply to the canvas if needed */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}